<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="员工统计" name="1">
      <div>
        <div class="search_box">
          <el-input v-model="pag.name" placeholder="请输入姓名"></el-input>
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
        <div class="export_box">
          <el-button type="primary" @click="visible = true">新增</el-button>
          <el-button type="primary" @click="totalWages">工资总览</el-button>
          <el-button type="primary" @click="totalOa">加班/奖金总览</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" :height="h" border>
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="sex" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="num" label="工号" align="center">
          </el-table-column>
          <el-table-column prop="degree" label="学历" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="电话" align="center">
          </el-table-column>
          <el-table-column prop="status" label="员工状态" align="center">
          </el-table-column>
          <el-table-column prop="entry_time" label="入职时间" align="center">
          </el-table-column>
          <el-table-column prop="driver_type" label="准驾车型" align="center">
          </el-table-column>
          <el-table-column
            prop="driving_experience"
            label="驾龄"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="toAddwages(scope.row)"
                >工资录入</el-button
              >
              <el-button type="text" @click="toShowwages(scope.row)"
                >工资明细</el-button
              >
              <el-button type="text" @click="toAddoa(scope.row)"
                >加班/奖金</el-button
              >
              <el-button type="text" @click="toShowoa(scope.row)"
                >加班/奖金明细</el-button
              >
              <el-button type="text" @click="editData(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click="delData(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="page_table">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="1"
            :page-sizes="[10, 20, 30, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pag.total"
          >
          </el-pagination>
        </div>
        <!-- 录入 -->
        <el-dialog
          title="人员信息录入"
          :visible.sync="visible"
          width="750px"
          :before-close="handleClose"
        >
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            label-width="130px"
            ref="carsForm"
            :rules="rules"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="form.sex">
                <el-option value="男" label="男"></el-option>
                <el-option value="女" label="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工号" prop="num">
              <el-input v-model="form.num"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role">
              <el-input v-model="form.role"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                value-format="yyyy/MM/dd"
                type="date"
                placeholder="选择日期"
                @change="changeBirthday"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" disabled></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="degree">
              <el-input v-model="form.degree"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="家庭住址" prop="address">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="紧急联系人" prop="emergency">
              <el-input v-model="form.emergency"></el-input>
            </el-form-item>
            <el-form-item label="紧急联系人电话" prop="emergency_phone">
              <el-input v-model="form.emergency_phone"></el-input>
            </el-form-item>
            <el-form-item label="员工状态" prop="status">
              <el-select v-model="form.status">
                <el-option value="在职" label="在职"></el-option>
                <el-option value="离职" label="离职"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职时间" prop="entry_time">
              <el-date-picker
                v-model="form.entry_time"
                type="date"
                value-format="yyyy/MM/dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="驾驶证号" prop="driver_number">
              <el-input v-model="form.driver_number"></el-input>
            </el-form-item>
            <el-form-item label="驾龄" prop="driving_experience">
              <el-input v-model="form.driving_experience"></el-input>
            </el-form-item>
            <el-form-item label="准驾车型" prop="driver_type">
              <el-input v-model="form.driver_type"></el-input>
            </el-form-item>
            <el-form-item label="所属公司" prop="belongs">
              <el-select v-model="form.belongs">
                <el-option
                  v-for="item in gsList"
                  :key="item.id"
                  :value="item.name"
                  :labe="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submitAdd">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-tab-pane>
    <el-tab-pane v-if="activeName == 2" label="工资明细" name="2"
      ><Wages :emp="emp" :empid="emp_id" :toshow="showAddWages"></Wages
    ></el-tab-pane>
    <el-tab-pane v-if="activeName == 3" label="加班/奖金" name="3"
      ><Oa :emp="emp" :empid="emp_id" :toshow="showAddOa"></Oa
    ></el-tab-pane>
  </el-tabs>
</template>

<script>
import { getDataByKey, openDB, changeDB, deleteDB, editDB } from "@/db/indexdb";
import { searchTable } from "@/db/search";
import Wages from "../wages/index";
import Oa from "../OA/index";
export default {
  components: {
    Wages,
    Oa,
  },
  data() {
    return {
      activeName: "1",
      emp: "",
      emp_id: "",
      showAddWages: false,
      showAddOa: false,
      visible: false,
      form: {},
      rules: {
        name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
      },
      gsList: [],
      tableData: [],
      total: 0,
      pag: {
        name: "",
        total: 0,
        page: 1,
        size: 10,
      },
      edit: false,
      h: "",
    };
  },
  created() {
    this.getList();
    this.h = document.documentElement.offsetHeight - 320;
  },
  methods: {
    toAddwages(row) {
      this.emp = row.name;
      this.emp_id = String(row.id);
      this.showAddWages = true;
      this.activeName = "2";
    },
    toShowwages(row) {
      this.emp = row.name;
      this.emp_id = String(row.id);
      this.showAddWages = false;
      this.activeName = "2";
    },
    totalWages() {
      this.emp = "";
      this.emp_id = "";
      this.showAddWages = false;
      this.activeName = "2";
    },
    toAddoa(row) {
      this.emp = row.name;
      this.emp_id = String(row.id);
      this.showAddOa = true;
      this.activeName = "3";
    },
    toShowoa(row) {
      this.emp = row.name;
      this.emp_id = String(row.id);
      this.showAddOa = false;
      this.activeName = "3";
    },
    totalOa() {
      this.emp = "";
      this.emp_id = "";
      this.showAddOa = false;
      this.activeName = "3";
    },
    handleClick() {},
    resetSearch() {
      this.pag = {
        name: "",
        total: 0,
        page: 1,
        size: 10,
      };
      this.getList();
    },
    getList() {
      openDB("car", "list").then(() => {
        getDataByKey("list", "员工表").then((res) => {
          searchTable(res?.data, this.pag, 1);
          let { total, list } = searchTable(res.data, this.pag, 1);
          (this.pag.total = total), (this.tableData = list);
        });
        getDataByKey("list", "公司信息表").then((res) => {
          this.gsList = res.data;
        });
      });
    },
    handleSizeChange1(val) {
      this.pag.size = val;
      this.getList();
    },
    handleCurrentChange1(val) {
      this.pag.page = val;
      this.getList();
    },
    changeBirthday(val) {
      let age = Math.floor(
        Math.abs((new Date() - new Date(val)) / (1000 * 60 * 60 * 24 * 365.25))
      );
      this.form.age = age;
    },
    submitAdd() {
      let data = { id: new Date().getTime(), ...this.form };
      if (this.edit) {
        editDB("list", "员工表", data).then((res) => {
          this.$message.success("修改成功");
          this.getList();
        });
      } else {
        changeDB("list", "员工表", data).then(() => {
          this.$message.success("添加成功");
          this.getList();
        });
      }
      this.handleClose();
    },
    handleClose() {
      this.visible = false;
      this.form = {};
    },
    editData(row) {
      this.edit = true;
      this.form = { ...row };
      this.visible = true;
    },
    delData(id) {
      this.$confirm("确定删除该条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDB("list", "员工表", row.id)
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
              this.visible = false;
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.el-form {
  .el-select,
  .el-input,
  .el-date-editor {
    width: 200px;
  }
  .el-textarea {
    width: 540px;
  }
}
</style>
